<%-- 
    Document   : index
    Created on : Apr 6, 2011, 7:43:00 AM
    Author     : Dine
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
    <head>
        <sj:head jqueryui="true" jquerytheme="south-street"/>
        <jsp:include page="WEB-INF/fragments/globalHead.html"/>
        <title>Welcome to Cashmate Credit Corporation</title>

        <style type="text/css">
            div#bannerContainer > span > img{
                float:left;
                width: 100px;
                height:100px;
                display:inline;
            }

            div#bannerContainer > h2{
                position:relative;
                font-size:60px;
                top:15px;
                left:-10px;
                text-shadow:white 0px 5px 6px;
                color:darkgreen;
            }

            div#bannerContainer > h2 + span{
                font-size:30px;
                position:relative;
                top:-48px;
                left:120px;
            }
            div#bannerContainer{
                width:400px;
                height:150px;
                margin:auto;
            }
            div#loginContainer{
                margin:50px auto;
                width:500px;
                height:430px;
                padding:10px;
                opacity:0.8;
            }
            table.wwFormTable{
                margin-left: 30px;
            }
            div#loginContainer p{
                margin:0px;
            }
            div#loginContainer form{
                width:370px;
                text-align:center;
                margin:auto;
            }
            input#submitButton{
                float:right;
                width:100%;
            }
            div#formResult{
                font-size:14px;
            }


            }
        </style> <!--index style-->

        <script type="text/javascript">
            function setError(id){
                $('#brLogForm label').css("color","black");
                $('#brLogForm label[for='+id+']').css("color","red");
            }

            $(document).ready(function(){
                $.subscribe('loginBefore', function(event,data) {
                    var form = event.originalEvent.form[0];
                    if(form.employeeId.value.length < 6 || form.employeeId.value==null || !isInteger(form.employeeId.value)){
                        $('div#formResult').removeClass("ui-state-highlight");
                        $('div#formResult').addClass("ui-state-error");
                        $('div#formResult').html(error('Please enter a valid <strong>ID number greater than or equal to 6 digits.</strong>'));
                        setError("employeeId");
                        event.originalEvent.options.submit = false;
                    }else if(form.employeePassword.value.length < 6 || form.employeePassword.value.length > 12 || form.employeePassword.value == null){
                        $('div#formResult').removeClass("ui-state-highlight");
                        $('div#formResult').addClass("ui-state-error");
                        $('div#formResult').html(error('Please enter a valid <strong>Employee Password between 6 to 12 characters.</strong>'));
                        setError("employeePassword");
                        event.originalEvent.options.submit = false;
                    }else{
                        $('#brLogForm').hide();
                        $('div#formResult').removeClass("ui-state-error");
                        $('div#formResult').addClass("ui-state-highlight");
                        $('div#formResult').html(info('Signing in...'));
                    }
                });
            });
        </script> <!--index script-->
    </head>

    <body>
        <c:if test="${sessionScope.auth==true}">
            <jsp:forward page="home.jsp"/>
        </c:if>
        <s:div id="loginContainer" cssClass="ui-widget-content ui-corner-all shadow">
            <s:div id="bannerContainer">
                <jsp:include page="WEB-INF/fragments/banner.jsp"/>
            </s:div>
            <div id="formResult" class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
                <p style="text-align:center;"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                    <c:if test="${param.auth == null}">
                        <strong>Welcome!</strong> Please enter your authentication credentials below.
                    </c:if>
                    <c:if test="${param.auth == 'none'}">
                        <script type="text/javascript">
                            $('#formResult').addClass("ui-state-error").removeClass("ui-state-highlight");
                        </script>
                        <strong>Sorry.</strong> Please enter your authentication credentials first.
                    </c:if>
                </p>
            </div>
            <br />

            <s:form action="login-authentication" id="brLogForm">
                <s:textfield label="Employee ID" id="employeeId" class="loginInput" title="ID Number" name="idnumber"/>
                <s:password label="Employee Password" id="employeePassword" title="Employee Password" class="loginInput" name="employeePassword" maxLength="12"/>
                <sj:submit cssClass="ui-state-default" id="submitButton"
                           value="Sign In"
                           button="true"
                           targets="formResult"
                           onBeforeTopics="loginBefore"
                           effect="highlight"
                           indicator="indicator"
                           effectDuration="300"
                           />
            </s:form>
            <p style="text-align:center;">
                <img id="indicator" src="res/sandbox/ajax-loader.gif" alt="Loading..." style="margin:auto;display:none"/>
            </p>
        </s:div>
    </body>
</html>
